<template>
  <common-page title="角色管理">
    <avue-crud
        ref="crud"
        v-model="form"
        class="crud-table"
        :option="tableOption"
        :data="list"
        :page.sync="page"
        :search.sync="searchForm"
        :table-loading="loading"
        :header-cell-class-name="() => 'crud-table-head'"
        :cell-class-name="() => 'crud-cell'"
        @on-load="getList()"
        @search-change="searchChange"
        @refresh-change="getList()"
        @row-update="update"
        @row-save="create"
    >
      <template #menuLeft="{ size }">
        <el-button type="primary" icon="el-icon-plus" :size="size" @click="handleAdd">新增 </el-button>
      </template>
      <template slot="roleNameHeader" slot-scope="{ column }">
        <span>角色</span>
      </template>
      <template #status="{ row }">
        <el-tag :type="row.status === 1 ? '' : row.status === 0 ? 'danger' : ''">{{
            row.status === 1 ? '启用' : row.status === 0 ? '停用' : ''
          }}</el-tag>
      </template>
      <template #menu="{ size, row }">
        <el-button type="text" :size="size" @click="handleEdit(row)">编辑</el-button>
        <el-button type="text" :size="size" @click="handleSet(row)">设置权益</el-button>
        <el-button type="text" :size="size" @click="handleAddPerson(row)">关联人员</el-button>
        <el-button v-if="row.status === 1" type="text" :size="size" @click="handleStop(row)">停用</el-button>
        <el-button v-if="row.status === 0" type="text" :size="size" @click="handleEnable(row)">启用</el-button>
        <el-button v-if="row.status === 0" type="text" :size="size" @click="handleDelete(row)">删除</el-button>
      </template>
      <template #searchMenu="{ size }">
        <el-button type="primary" :size="size" @click="searchChange">查 询</el-button>
        <el-button type="primary" plain :size="size" @click="resetForm">重 置</el-button>
      </template>
    </avue-crud>
    <AddPerson ref="addPerson" @ok="getList"></AddPerson>
    <SetForm ref="setForm" :menu-list="menuList" @ok="getList"></SetForm>
  </common-page>
</template>

<script>
import { getRoleList, delRoleList, addRoleList, editRoleList, getTenantPermission } from '@/api/role'
import { tableOption } from './tableOption'
import AddPerson from './components/addPerson.vue'
import SetForm from './components/setForm.vue'
export default {
  name: 'Role',
  components: {
    AddPerson,
    SetForm
  },
  data() {
    return {
      searchForm: {},
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      },
      list: [],
      loading: true,
      form: {
        createBy: '',
        createTime: '',
        delFlag: '',
        id: '',
        platformId: '',
        roleCode: '',
        roleDesc: '',
        roleName: '',
        roleOrder: '',
        status: '',
        tenantId: '',
        updateBy: '',
        updateTime: ''
      },
      isShowSearch: false,
      menuList: []
    }
  },
  computed: {
    documentHeight() {
      return this.$store.state.app.documentClientHeight
    },
    tableOption() {
      return tableOption.call(this)
    },
    // handleList() {
    //   return this.tableOption.column.concat({
    //     hide: false,
    //     prop: "MENU",
    //     label: this.tableOption.menuTitle || "操作",
    //   });
    // },
    permissionCode() {
      return this.$store.state.global.permissionCode || []
    }
  },
  created() {
    this.getMenus()
    this.checkList = this.tableOption.column.map((i) => i.prop)
  },
  methods: {
    getMenus() {
      getTenantPermission({
        platformCode: 'SUPERVISE'
      }).then((res) => {
        this.menuList = res.result || []
        // console.log(this.menuList);
      })
    },
    resetForm() {
      this.$refs.crud.searchReset()
      this.page.currentPage = 1
      this.getList()
    },
    handleColumn(prop, e) {
      if (prop == 'MENU') {
        this.$set(this.tableOption, 'menu', !e)
      }
      this.$refs.crud.refreshTable()
    },
    getList(option) {
      console.log('option', option)
      this.loading = true
      getRoleList({
        pageNo: this.page.currentPage,
        pageSize: this.page.pageSize,
        ...this.searchForm,
        ...(option || '')
      })
        .then((response) => {
          this.list = response.result.records
          this.page.total = response.result.total
        })
        .catch(() => {})
        .finally(() => {
          this.loading = false
        })
    },
    searchChange(form, done) {
      console.log('form', form)
      this.page.currentPage = 1
      this.getList(form || '')
      done && done()
    },
    handleAdd() {
      this.$refs.crud.rowAdd()
    },
    handleEdit(row) {
      this.$refs.crud.rowEdit(row)
    },
    handleDelete(row, index) {
      this.$confirm('您确定删除该条数据吗?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        delRoleList(row.id)
          .then(() => {
            this.getList()
            this.$message.success('删除成功')
          })
          .finally(() => {
            this.loading = false
          })
      })
    },
    create(row, done, loading) {
      addRoleList(row)
        .then(() => {
          this.getList()
          done()
          this.$message({
            message: '新增成功',
            type: 'success',
            onClose: () => {
              this.$confirm('当前角色尚未设置权益,是否立即设置?', '警告', {
                confirmButtonText: '立即设置',
                cancelButtonText: '暂不设置',
                type: 'warning'
              }).then(() => {
                this.$refs.setForm.open(this.list.slice(1)[0])
                // console.log(this.list[0]);
              })
            }
          })
        })
        .catch(() => {
          loading()
        })
    },
    update(row, index, done, loading) {
      if (!row.roleDesc) {
        row.roleDesc = ''
      }
      editRoleList(row)
        .then(() => {
          this.getList()
          done()
          this.$message.success('修改成功')
        })
        .catch(() => {
          loading()
        })
    },
    handleSet(row) {
      this.$refs.setForm.open(row)
    },
    handleAddPerson(row) {
      this.$refs.addPerson.open(row)
    },
    handleStop(row) {
      const param = JSON.parse(JSON.stringify(row))
      param.status = 0
      this.$confirm('你确定停用该角色吗?', '停用', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        customClass: 'custom-message-box',
        type: 'warning'
      }).then(() => {
        this.loading = true
        editRoleList(param)
          .then(() => {
            this.getList()
            this.$message.success('停用成功')
          })
          .finally(() => {
            this.loading = false
          })
      })
    },
    handleEnable(row) {
      const param = JSON.parse(JSON.stringify(row))
      param.status = 1
      this.$confirm('你确定启用该角色吗?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        editRoleList(param)
          .then(() => {
            this.getList()
            this.$message.success('启用成功')
          })
          .finally(() => {
            this.loading = false
          })
      })
    },
    getPermission(key, row, index) {
      switch (key) {
        case 'addBtn':
          return this.permissionCode.includes('role:add')
        default:
          return true
      }
    }
  }
}
</script>

<style lang="scss" scoped></style>
